.vi_steps{
	&.theme1{
		flex-direction:row;//强制为水平排列
		.vi_steps_group{
			display: flex;
			align-items: center;
			width: calc(33.33% - 0.5em);
			height: 2.5em;
			line-height: 1;
			margin: 0.25em;
			padding: 0 0.5em;
			background: linear-gradient(to bottom, #a5a5a7 0%, #808082 100%);
			box-shadow: 0 1px 2px #333;
			box-sizing: border-box;
			border-radius: 0.25em;
			.vi_steps_point{
				margin-right: 1.5em;
				font-size: 130%;
				font-weight: bold;
				color: white;
			}
			.vi_steps_title{
				color: white;
				overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
			}
			.vi_steps_describe{
				display: none;
			}
			.vi_steps_line{
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				&::before,
				&::after{
					content: "";
					position: absolute;
					left: 1em;
					width: 1em;
					height: 54%;
					border-right: 2px solid rgba(255, 255, 255, 0.3);
				}
				&::before{
					transform-origin: 100% 0;
					transform: rotate(-20deg);
					top: 0;
				}
				&::after{
					transform-origin: 100% 100%;
					transform: rotate(20deg);
					bottom: 0;
				}
			}
			&.done{}
			&.curr{
				background: linear-gradient(to bottom, #f8df85 0%, #f0a62d 100%);
				box-shadow: 0 1px 2px #b8740d;
			}
			&.follow{}
		}
	}
	
	&.theme2{
		flex-direction:row;//强制为水平排列
		.vi_steps_group{
			display: flex;
			align-items: center;
			position: relative;
			width: calc(33.33%);
			height: 2.5em;
			line-height: 1;
			padding: 0 1em;
			background: linear-gradient(to bottom, #a5a5a7 0%, #808082 100%);
			box-shadow: 0 1px 2px #333;
			box-sizing: border-box;
			&:first-child{
				border-top-left-radius: 0.25em;
				border-bottom-left-radius: 0.25em;
				&::before{
					display: none;
				}
			}
			&:last-child{
				padding-right: 0.1em;
				&::after{
					right: -0.9em;
				}
			}
			&::before{
				content: "";
				position: absolute;
				left: -0.85em;
				right: 100%;
				top:0;
				bottom: 0;
				z-index: 1;
				height: 100%;
				background: linear-gradient(to bottom, #a5a5a7 0%, #808082 100%);
			}
			&::after{
				content: "";
				position: absolute;
				right: 0;
				width: 0;
				height: 0;
				z-index: 2;
				border-image: linear-gradient(-135deg, #a5a5a7 0%, #808082 100%);
				border-top: 1.77em solid;
				border-right: 1.77em solid;
				transform: rotate(-45deg);
			}
			.vi_steps_point{
				margin-right: 0.5em;
				font-size: 130%;
				font-weight: bold;
				color: white;
			}
			.vi_steps_title{
				position: relative;
				z-index: 3;
				color: white;
				overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
			}
			.vi_steps_describe,
			.vi_steps_line{
				display: none;
			}
			&.done{}
			&.curr{
				background: linear-gradient(to bottom, #f8df85 0%, #f0a62d 100%);
				box-shadow: 0 1px 2px #b8740d;
				&::before{
					background: linear-gradient(to bottom, #f8df85 0%, #f0a62d 100%);
				}
				&::after{
					border-image: linear-gradient(-135deg, #f8df85 0%, #f0a62d 100%);
				}
			}
			&.follow{}
		}
	}
	
	&.theme3{
		flex-direction:row;//强制为水平排列
		.vi_steps_group{
			display: flex;
			align-items: center;
			line-height: 1;
			&:last-child{
				.vi_steps_title::after{
					right: -0.5em;
					border-top-right-radius: 1.25em;
					border-bottom-right-radius: 1.25em;
				}
			}
			.vi_steps_point{
				position: relative;
				z-index: 1;
				font-weight: bold;
				border: 4px solid white;
				border-radius: 50%;
				width: calc(3em - 8px);
				height: calc(3em - 8px);
			}
			.vi_steps_point_icon,
			.vi_steps_point_text{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: white;
				box-sizing: border-box;
				border-radius: 50%;
				border: 3px solid #333;
				box-shadow: 0 1px 2px #333;
				font-size: 130%;
				color: #333;
			}
			.vi_steps_title{
				position: relative;
				z-index: 0;
				min-width: 5em;
				height: 2.5em;
				padding: 0 0.5em;
				line-height: 2.5;
				flex-shrink: 0;
				color: white;
				text-align: center;
				&::after{
					content: "";
					position: absolute;
					left: -1.5em;
					right: -1.5em;
					top: 0;
					bottom: 0;
					z-index: -1;
					background: linear-gradient(to bottom, #555 0%, #222 100%);
					box-shadow: 0 1px 2px #333;
				}
			}
			.vi_steps_describe,
			.vi_steps_line{
				display: none;
			}
			&.done{
				.vi_steps_point_icon,
				.vi_steps_point_text{
					background-color: #f8f8f8;
					border-color: rgba(0,0,0,0.3);
					color: $vi-color-success;
				}
				.vi_steps_font{
					background-image: linear-gradient(to top,#{$vi-color-success} 0%,GreenYellow 100%);
					background-clip: text;
					-webkit-text-fill-color:transparent;
				}
				.vi_steps_title{
					opacity: 0.4;
				}
			}
			&.curr{}
			&.follow{
				.vi_steps_point_icon,
				.vi_steps_point_text{
					background-color: #f8f8f8;
					border-color: rgba(0,0,0,0.3);
					color: rgba(0,0,0,0.4);
				}
				.vi_steps_title{
					opacity: 0.4;
				}
			}
		}
	}
}